<template>
  <div class="tabbar-component">
    <div class="footer-plac"></div>
    <div class="footer-con">
      <footer>
        <router-link to="/" exact replace>
          <i class="icon icon1"></i>
          <p>首页</p>
        </router-link>
        <router-link to="/order" replace>
          <i class="icon icon2"></i>
          <p>订单</p>
        </router-link>
        <router-link to="/my" replace>
          <i class="icon icon3"></i>
          <p>我的</p>
        </router-link>
      </footer>
    </div>
  </div>
</template>
<script>
export default {

}
</script>
<style lang="less" scoped>
.footer-plac{
  height: 50PX;
}
.footer-con{
  z-index: 8;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50PX;
  footer{
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    .border-top(#dedede);
    width: 100%;
    height: 100%;
    a{
      text-align: center;
      height: 45PX;
      width: 33.33333333333%;
      font-size: 12PX;
      color: #999;
      padding-top: 5PX;
      .icon{
        width: 25PX;
        height: 25PX;
        display: block;
        margin: 0 auto 1PX;
        background-repeat: no-repeat;
        background-size: cover;
        &.icon1{
          background-image: url('../../assets/bottom1.png');
        }
        &.icon2{
          background-image: url('../../assets/bottom2.png');
        }
        &.icon3{
          background-image: url('../../assets/bottom3.png');
        }
      }
      &.router-link-active{
        color: @maincolor;
        .icon{
          &.icon1{
            background-image: url('../../assets/bottom1-on.png');
          }
          &.icon2{
            background-image: url('../../assets/bottom2-on.png');
          }
          &.icon3{
            background-image: url('../../assets/bottom3-on.png');
          }
        }
      }
    }
  }
}
</style>
